
$(function () {

  

  function cbqps(start, end) {
       $('#qps-date-picker' + ' span').html(start.format('YYYY-MM-DD HH:mm') + ' - ' + end.format('YYYY-MM-DD HH:mm'));
  }

  var start = moment().startOf("day");
  var end = moment();
  $('#qps-date-picker').daterangepicker(
     {
       ranges: {
         '过去15m': [moment().subtract(15, "m"), moment()],
         '过去1h': [moment().subtract(1, 'h'), moment()],
         '过去2h': [moment().subtract(2, 'h'), moment()],
         '过去3h': [moment().subtract(3, 'h'), moment()],
         '过去4h': [moment().subtract(4, 'h'), moment()],
         '过去6h': [moment().subtract(6, 'h'), moment()],
         '今天': [moment().startOf("day"), moment()],
         '过去1天': [moment().subtract(1, 'days'), moment()],
         '过去2天': [moment().subtract(2, 'days'), moment()],
         '过去3天': [moment().subtract(3, 'days'), moment()],
         '过去4天': [moment().subtract(4, 'days'), moment()]
       },
       startDate: start,
       endDate: end,
       timePicker: true
     }, cbqps);

  console.log("to create saxqps chart");
  var saxqpschart = createChart("container", "sinaX 广告请求 QPS", "广告QPS", "总流量");
  console.log("created saxqps chart");
  var wapqpschart = createChart('wapqps', 'sinaX wap 图形广告请求 QPS', "广告QPS", "Wap总流量");
  var appqpschart = createChart('appqps', 'sinaX APP 图形广告请求 QPS', "广告QPS", "APP 图形");
  var nativeqpschart = createChart('nativeqps', 'sinaX 信息流广告请求 QPS', "广告QPS", "信息流");
  var nativewapqpschart = createChart('nativewapqps', 'sinaX WAP 信息流广告请求 QPS', "广告QPS", "WAP信息流");
  var nativeappqpschart = createChart('nativeappqps', 'sinaX APP 信息流广告请求 QPS', "广告QPS", "APP信息流");
  var isbar = false;

  $('#stock').click(function(event) {
	    if(isbar){
	      isbar = false;
	      saxqpschart.options.chart.type = "line";
	      wapqpschart.options.chart.type = "line";
	      appqpschart.options.chart.type = "line";
	      nativeqpschart.options.chart.type = "line";
	      nativeappqpschart.options.chart.type = "line";
	      nativewapqpschart.options.chart.type = "line";
	      $(this).html("柱状图显示(按天)");
	    }else{
	      isbar = true;
	      saxqpschart.options.chart.type = "column";
	      wapqpschart.options.chart.type = "column";
	      appqpschart.options.chart.type = "column";
	      nativeqpschart.options.chart.type = "column";
	      nativeappqpschart.options.chart.type = "column";
	      nativewapqpschart.options.chart.type = "column";
	      $(this).html("切换回折线图");
	    }
    	console.log(isbar);
    	$('#qps-date-picker').trigger('apply.daterangepicker', $('#qps-date-picker').data('daterangepicker'));
  	});

      //添加昨天的数据进行对比
  var hasadded = false
	$('#bt-add-yestoday').click(function(event) {
    if (!hasadded){
      console.log("bt-add-yestoday");
      var start_ms = start.subtract(1, "day").valueOf();
      var end_ms = end.subtract(1, "day").valueOf();
      updateChartsWithTime(start_ms, end_ms, "昨天 ", 24*60*60*1000, true);  
      hasadded = true;
    } 
		
	});

  var interval = "1m";
  $('#qps-date-picker').on('apply.daterangepicker', function(ev, picker) {
  	start = picker.startDate
  	end = picker.endDate
    var start_ms = picker.startDate.valueOf()
    var end_ms = picker.endDate.valueOf()
    if(isbar == true){
      console.log("1d")
      interval = "1d";
    }else{
      interval = "1m";
    }
    hasadded = false;
    updateChartsWithTime(start_ms, end_ms, "", 0, false);
  });

  function updateChartsWithTime(start_ms, end_ms, pre, offset, add) {
  	updateChart(
      	{seriename: "saxqps", metric: "req", querystr: "reqtype:imp,day:today", start: start_ms, end: end_ms, inter: interval, offset: offset}, saxqpschart, pre + "总流量", add);
    updateChart(
      	{seriename: "saxqps", metric: "req", querystr: "reqtype:imp,day:today,traffic:wap", start: start_ms, end: end_ms, inter: interval, offset: offset},wapqpschart, pre + "Wap总流量", add);
    updateChart(
      	{seriename: "saxqps", metric: "req", querystr: "reqtype:imp,day:today,traffic:sinaapp", start: start_ms, end: end_ms, inter: interval, offset: offset}, appqpschart, pre+ "APP 图形", add);
    updateChart(
      	{seriename: "saxqps", metric: "req", querystr: "reqtype:imp,day:today,traffic:native", start: start_ms, end: end_ms, inter: interval, offset: offset}, nativeqpschart, pre+"信息流", add);
    updateChart(
      	{seriename: "saxqps", metric: "req", querystr: "reqtype:imp,day:today,traffic:native,t2:wap", start: start_ms, end: end_ms, inter: interval, offset: offset}, nativewapqpschart, pre+"WAP信息流", add);
    updateChart(
    	{seriename: "saxqps", metric: "req", querystr: "reqtype:imp,day:today,traffic:native,t2:app", start: start_ms, end: end_ms, inter: interval, offset: offset}, nativeappqpschart, pre+"APP信息流", add);
  }

  $('#qps-date-picker').trigger('apply.daterangepicker', $('#qps-date-picker').data('daterangepicker'));
})


// 展示引擎统计量的处理
$(function () {
	var start = moment().startOf("day");
  	var end = moment();
	function cbbrand(start, end) {
       $('#brand-date-picker' + ' span').html(start.format('YYYY-MM-DD HH:mm') + ' - ' + end.format('YYYY-MM-DD HH:mm'));
  	}

  $('#brand-date-picker').daterangepicker(
     {
       ranges: {
         '过去15m': [moment().subtract(15, "m"), moment()],
         '过去1h': [moment().subtract(1, 'h'), moment()],
         '过去2h': [moment().subtract(2, 'h'), moment()],
         '过去3h': [moment().subtract(3, 'h'), moment()],
         '过去4h': [moment().subtract(4, 'h'), moment()],
         '过去6h': [moment().subtract(6, 'h'), moment()],
         '今天': [moment().startOf("day"), moment()],
         '过去1天': [moment().subtract(1, 'days'), moment()],
         '过去2天': [moment().subtract(2, 'days'), moment()],
         '过去3天': [moment().subtract(3, 'days'), moment()],
         '过去4天': [moment().subtract(4, 'days'), moment()]
       },
       startDate: start,
       endDate: end,
       timePicker: true
     }, cbbrand);

	var brandreqchart = createChart('brandreqchart', '展示引擎 广告请求 QPS', "广告QPS", "流量");
	var brandtimeoutchart = createChart('brandtimeouts', '展示引擎 广告请求 超时', "广告QPS", "超时");
  	var isbar = false;


    $('#brand-date-picker').on('apply.daterangepicker', function(ev, picker) {
	    var start = picker.startDate.valueOf()
	    var end = picker.endDate.valueOf()
	    console.log(isbar);
	    var interval = "1m";
	    if(isbar == true){
	      console.log("1d")
	      interval = "1d";
	    }

	    updateChart(
	      {seriename: "ly", metric: "totalreq", querystr: "insname:ly_imp", start: start, end: end, inter: interval}, brandreqchart,  "总流量");
	    updateChart(
	      {seriename: "ly", metric: "timeout", querystr: "insname:ly_imp", start: start, end: end, inter: interval}, brandtimeoutchart, "Wap总流量");

	    console.log(picker.startDate.format('YYYY-MM-DD'));
	    console.log(picker.endDate.format('YYYY-MM-DD'));
  	});
  	$('#brand-date-picker').trigger('apply.daterangepicker', $('#brand-date-picker').data('daterangepicker'));
})

// 效果引擎统计量的处理
$(function () {
	var start = moment().startOf("day");
  	var end = moment();
	function cbbrand(start, end) {
       $('#fy-date-picker' + ' span').html(start.format('YYYY-MM-DD HH:mm') + ' - ' + end.format('YYYY-MM-DD HH:mm'));
  	}

  $('#fy-date-picker').daterangepicker(
     {
       ranges: {
         '过去15m': [moment().subtract(15, "m"), moment()],
         '过去1h': [moment().subtract(1, 'h'), moment()],
         '过去2h': [moment().subtract(2, 'h'), moment()],
         '过去3h': [moment().subtract(3, 'h'), moment()],
         '过去4h': [moment().subtract(4, 'h'), moment()],
         '过去6h': [moment().subtract(6, 'h'), moment()],
         '今天': [moment().startOf("day"), moment()],
         '过去1天': [moment().subtract(1, 'days'), moment()],
         '过去2天': [moment().subtract(2, 'days'), moment()],
         '过去3天': [moment().subtract(3, 'days'), moment()],
         '过去4天': [moment().subtract(4, 'days'), moment()]
       },
       startDate: start,
       endDate: end,
       timePicker: true
     }, cbbrand);

	var fyreqchart = createChart('fyreqchart', '效果引擎 广告请求 QPS', "广告QPS", "流量");
	var fybanreqchart = createChart('fybannerreq', '效果引擎 图形广告请求 QPS', "广告QPS", "流量");
	var fynatreqchart = createChart('fynativereq', '效果引擎 信息流广告请求 QPS', "广告QPS", "流量");
	var fytimeoutchart = createChart('fytimeout', '效果引擎 广告请求 超时', "广告QPS", "超时");
  	var isbar = false;


    $('#fy-date-picker').on('apply.daterangepicker', function(ev, picker) {
	    var start = picker.startDate.valueOf()
	    var end = picker.endDate.valueOf()
	    console.log(isbar);
	    var interval = "1m";
	    if(isbar == true){
	      console.log("1d")
	      interval = "1d";
	    }

	    updateChart(
	      {seriename: "fy", metric: "totalreq", querystr: "insname:fy_imp", start: start, end: end, inter: interval}, fyreqchart,  "扶翼总请求");
	    updateChart(
	      {seriename: "fyqps", metric: "fy17_pass", start: start, end: end, inter: interval}, fybanreqchart,  "扶翼图形广告");
	    updateChart(
	      {seriename: "fyqps", metric: "fy45_pass", start: start, end: end, inter: interval}, fynatreqchart,  "扶翼信息流");
	    updateChart(
	      {seriename: "fy", metric: "timeout", querystr: "insname:fy_imp", start: start, end: end, inter: interval}, fytimeoutchart, "超时");

	    console.log(picker.startDate.format('YYYY-MM-DD'));
	    console.log(picker.endDate.format('YYYY-MM-DD'));
  	});
  	$('#fy-date-picker').trigger('apply.daterangepicker', $('#fy-date-picker').data('daterangepicker'));
})

function createChart(renderto, title, ytitle, seriename) {
    var typ = "line"

    var chart = Highcharts.chart(renderto, {
          chart: {
              type: typ,
              zoomType: 'x'
          },
          title: {
              text: title
          },
          subtitle: {
              text: document.ontouchstart === undefined ?
                      '在图像区域内点击拖拽进行放大' : '重置放大'
          },
          legend: {
              align: 'top',
              verticalAlign: 'top',
              layout: 'vertical',
              x: 0,
              y: 100
          },
          xAxis: {
              type: 'datetime'
          },
          yAxis: {
              title: {
                  text: ytitle
              }
          },
          legend: {
              enabled: true
          },
          tooltip: {
    		      pointFormat: '<span style="height:30px; color:{series.color}">{series.name}</span>: ({point.y:,.0f})<br/>',
    		      split: false,
              crosshairs: true,
              shared: true
    		  },
          series: [{
            name: "new",
            data: []
          }]});

     return chart
}

function updateChart(params, charthandle, seriename, add) {
	if(add) {
		$.getJSON('/saxqps', params, function(json, textStatus) {
			    charthandle.addSeries({
			          name: seriename,
			          data: json
			      });
		  });
	}else{
		$.getJSON('/saxqps', params, function(json, textStatus) {
        for (var i = charthandle.series.length -1; i >= 0; i --){
          charthandle.series[i].remove();
        }
		    charthandle.addSeries({
		          name: seriename,
		          data: json
		      });
		  });
	}
 
}
